@extends('common.base-master')

@section('html-head')
    <link rel="stylesheet" type="text/css" href="{{url('css/bootstrap.min.css')}}">
    <link href="{{url('css/index.css')}}" type="text/css" rel="stylesheet"/>

    <script src="{{url('js/lib/bootstrap.min.js')}}"></script>
    <script src="{{url('js/lib/echarts.js')}}"></script>
    <script src="{{url('js/index.js')}}"></script>
@endsection

@section('html-body')
    <main >
        <section class="banner">
            <div class="bg-opacity">
                <div class="wrapp">
                    <div class="contain">
                        <h2>旁观者创投</h2>
                        <p>以数据推动融资，让创业更简单</p>
                        <a href="@if(Auth::check()){{route('Home.Project.showCreateProject')}} @else {{route('Home.Auth.loginShow')}} @endif">创建项目</a>
                    </div>
                </div>
            </div>
        </section>
        <section class="mod mod1">
            <div class="wrapp">
                <h3>投资风向标</h3>
                <div id="main" style="height:400px"></div>

            </div>
        </section>
        <section class="mod mod2">
            <div class="wrapp">
                <h3>权威数据</h3>
                <div class="data-block">
                    <ul>
                        <li>
                            <dl>
                                <dt></dt>
                                <dd>
                                    <p class="total">12</p>
                                    <p>完成项目数</p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="t_2"></dt>
                                <dd>
                                    <p class="total">3480万</p>
                                    <p>融资金额</p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="t_3"></dt>
                                <dd>
                                    <p class="total">0</p>
                                    <p>投资事件</p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="t_4"></dt>
                                <dd>
                                    <p class="total">629人</p>
                                    <p>认证投资人</p>
                                </dd>
                            </dl>
                        </li>
                        <li>
                            <dl>
                                <dt class="t_5"></dt>
                                <dd>
                                    <p class="total">198</p>
                                    <p>总项目数</p>
                                </dd>
                            </dl>
                        </li>
                    </ul>
                </div>
                <div class="data-sheet">
                    <div>
                        <p class="title">项目最多的领域Top5</p>
                        <ul>
                            <li><i>1.汽车服务</i><p><em class="progress-bar" style="width: 240px;">823</em></p></li>
                            <li><i>2.本地生活</i><p><em class="progress-bar" style="width: 150px;">483</em></p></li>
                            <li><i>3.汽车交通</i><p><em class="progress-bar" style="width: 100px;">405</em></p></li>
                            <li><i>4.广告营销</i><p><em class="progress-bar" style="width: 70px;">242</em></p></li>
                            <li><i>5.教育</i><p><em class="progress-bar" style="width: 50px;">169</em></p></li>
                        </ul>
                    </div>
                    <div>
                        <p class="title">旁观者平台最多的领域Top5</p>
                        <ul class="r_list">
                            <li><i>1.汽车交通</i><p><em class="progress-bar" style="width: 15px;">4</em></p></li>
                            <li><i>2.本地生活</i><p><em class="progress-bar" style="width: 10px;">3</em></p></li>
                            <li><i>3.电子商务</i><p><em class="progress-bar" style="width: 10px;">3</em></p></li>
                            <li><i>4.汽车服务</i><p><em class="progress-bar" style="width: 5px;">1</em></p></li>
                            <li><i>5.教育</i><p><em class="progress-bar" style="width: 5px;">1</em></p></li>
                        </ul>
                    </div>
                </div>
                <div class="graphic">
                    <div class="g1" id="g1" style="height: 600px; width: 49%;display:inline-block;"></div>
                    <div class="g2" id="g2" style="height: 600px; width: 49%;display:inline-block;"></div>
                </div>
            </div>
        </section>
        <section class="mod mod3">
            <div class="bg-alliance">
                <div class="wrapp">
                    <h3>旁观者顶级投资机构联盟</h3>
                    <div class="slide">
                        <div>
                            <ul class="gallery"style="left: 0;">
                                <li>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_1.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>青松资本</strong></a></p>
                                            <p>青松资本......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_2.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>清创科技</strong></a></p>
                                            <p>清创科技......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_3.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>软银中国资本</strong></a></p>
                                            <p>软银中国资本......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_4.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>同创伟业</strong></a></p>
                                            <p>同创伟业......</p>
                                        </dd>
                                    </dl>
                                </li>
                                <li>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_5.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>维思资本</strong></a></p>
                                            <p>维思资本......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_6.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>联创策源</strong></a></p>
                                            <p>联创策源......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_7.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>中路集团</strong></a></p>
                                            <p>中路集团......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_8.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>IDG资本</strong></a></p>
                                            <p>IDG资本......</p>
                                        </dd>
                                    </dl>
                                </li>
                                <li>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_9.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>KPCB</strong></a></p>
                                            <p>KPCB......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_10.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>德同资本</strong></a></p>
                                            <p>德同资本......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_11.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>丰厚资本</strong></a></p>
                                            <p>丰厚资本......</p>
                                        </dd>
                                    </dl>
                                    <dl>
                                        <dt><img src="../images/commpany/commpany_12.png" /></dt>
                                        <dd>
                                            <p><a href="#"><strong>经纬中国</strong></a></p>
                                            <p>经纬中国......</p>
                                        </dd>
                                    </dl>
                                </li>
                            </ul>
                        </div>
                        <ul class="gallery_nav"></ul>
                        <em class="pre"></em>
                        <em class="next_"></em>
                    </div>
                </div>
            </div>
        </section>
        <section class="mod mod4">
            <div class="wrapp">
                <h4>联系我们</h4>
                <div>
                    <p class="p1"><em>E-mail:</em> <a href="mailto:bp@pgzhe.com">bp@pgzhe.com</a></p>
                    <p class="p2">扫二维码，关注微信公众号</p>
                    <p class="p3"><em>电话:</em> 020 - 29870266</p>
                </div>
            </div>
        </section>
        <div class="mirror"></div>
    </main>
    <!-- ECharts单文件引入 -->
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts : '../js/lib/dist',
                echarts_: '../js/lib/theme'
            }
        });

        // 使用
        require(
                [
                    'echarts',
                    'echarts/chart/line',
                    'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                    'echarts_/shine'
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('main'), "macarons");


                    option = {
                        //定义主题样式
                        tooltip : {
                            trigger: 'axis'
                        },
                        toolbox: {
                            show : true,
                            feature : {
                                magicType: {show: true, type: ['line', 'bar']},
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        legend: {
                            data:['数量','总金额']
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ['广告营销','企业服务','汽车交通','本地生活','社交网络','房产','工具软件','教育','旅游','硬件','游戏','医疗健康','电子医疗', '文化娱乐','互联网','金融'],
                                axisLabel: {
                                    rotate: 45, //刻度旋转45度角
                                    textStyle: {
                                        fontSize: 14
                                    }
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value',
                                name : '数量 单位：个',
                                axisLabel : {
                                    formatter: '{value} 个'
                                }
                            },
                            {
                                type : 'value',
                                name : '总金额 单位：亿元',
                                axisLabel : {
                                    formatter: '{value} 亿'
                                }
                            }
                        ],
                        series : [
                            {
                                name:'数量',
                                type:'line',
                                data:[242 , 823 , 405, 483, 130 , 99,35,169,112,160,96,114,84,122,60,17]
                            },
                            {
                                name:'总金额',
                                type:'bar',
                                yAxisIndex: 1,
                                data:[155.424332 , 463.5451, 1065.70341, 262.651155,  63.256835 , 281.7157, 11.4325,89.5953, 207.76845, 187.09428, 43.00055, 337.5600, 133.9004, 223.1115 ,15.1000 ,58.0600]
                            }
                        ]
                    };
                    var lastData = 20;
                    var axisData;

                    timeTicket = (function (){
                        lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
                        lastData = lastData.toFixed(1) - 0;
                        axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

                        // 动态数据接口 addData
                        myChart.addData([
                            [
                                0,        // 系列索引
                                Math.round(Math.random() * 1000), // 新增数据
                                true,     // 新增数据是否从队列头部插入
                                false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                            ],
                            [
                                1,        // 系列索引
                                lastData, // 新增数据
                                false,    // 新增数据是否从队列头部插入
                                false,    // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                                axisData  // 坐标轴标签
                            ]
                        ]);
                    }, 2100);
                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
        );
    </script>
    <script>var timeTicket</script>

    <!--


    权威数据
    圆饼图
    id=g1

    start -->
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '../js/lib/dist',
                echarts_: '../js/lib/theme'
            }
        });

        // 使用
        require(
                [
                    'echarts',
                    'echarts/chart/pie',
                    //'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                    //'echarts_/shine'
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('g1'), "macarons");

                    var option = {
                        title : {
                            text: '热门投资机构 TOP5',
                            subtext: '',
                            x:'center'
                        },
                        tooltip : {
                            trigger: '',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : '',
                            x : '',
                            data:['','','','','']
                        },
                        toolbox: {
                            show : false,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {
                                    show: true,
                                    type: ['pie', 'funnel'],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            width: '50%',
                                            funnelAlign: 'left',
                                            max: 1548
                                        }
                                    }
                                },
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        series : [
                            {
                                name:'机构投资项目数量',
                                type:'pie',
                                radius : '40%',
                                center: ['40%', '40%'],
                                data:[
                                    {value:191, name:'创新工场'},
                                    {value:242, name:'真格基金'},
                                    {value:287, name:'经纬中国'},
                                    {value:407, name:'IDG'},
                                    {value:291, name:'红杉资本中国'}
                                ]
                            }
                        ]
                    };



                    var lastData = 11;
                    var axisData;
//clearInterval(timeTicket);
                    timeTicket = (function (){
                        lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
                        lastData = lastData.toFixed(1) - 0;
                        // axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

                        // 动态数据接口 addData
                        myChart.addData([
                            [
                                0,        // 系列索引
                                Math.round(Math.random() * 1000), // 新增数据
                                true,     // 新增数据是否从队列头部插入
                                false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                            ],
                            [
                                1,        // 系列索引
                                lastData, // 新增数据
                                false,    // 新增数据是否从队列头部插入
                                false,    // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                                axisData  // 坐标轴标签
                            ]
                        ]);
                    }, 2100);



                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
        );
    </script>
    <script>var timeTicket</script>
    <!--权威数据 end-->







    <!--


    权威数据
    圆饼图
    id=g2

    start -->
    <script type="text/javascript">
        // 路径配置
        require.config({
            paths: {
                echarts: '../js/lib/dist',
                echarts_: '../js/lib/theme'
            }
        });

        // 使用
        require(
                [
                    'echarts',
                    'echarts/chart/pie',
                    //'echarts/chart/bar', // 使用柱状图就加载bar模块，按需加载
                    //'echarts_/shine'
                ],
                function (ec) {
                    // 基于准备好的dom，初始化echarts图表
                    var myChart = ec.init(document.getElementById('g2'), "macarons");

                    var option = {
                        title : {
                            text: '热门投资人 TOP5',
                            subtext: '',
                            x:'center'
                        },
                        tooltip : {
                            trigger: '',
                            formatter: "{a} <br/>{b} : {c} ({d}%)"
                        },
                        legend: {
                            orient : '',
                            x : '',
                            data:['','','','','']
                        },
                        toolbox: {
                            show : false,
                            feature : {
                                mark : {show: true},
                                dataView : {show: true, readOnly: false},
                                magicType : {
                                    show: true,
                                    type: ['pie', 'funnel'],
                                    option: {
                                        funnel: {
                                            x: '25%',
                                            width: '50%',
                                            funnelAlign: 'left',
                                            max: 1548
                                        }
                                    }
                                },
                                restore : {show: true},
                                saveAsImage : {show: true}
                            }
                        },
                        calculable : true,
                        series : [
                            {
                                name:'投资人投资项目数量',
                                type:'pie',
                                radius : '40%',
                                center: ['50%', '40%'],
                                data:[
                                    {value:139, name:'真格基金创始人徐小平'},
                                    {value:130, name:'德迅投资曾李青'},
                                    {value:70,  name:'梅花天使创投吴世春'},
                                    {value:115, name:'中路资本陈荣'},
                                    {value:60,  name:'联想之星刘维'}
                                ]
                            }
                        ]
                    };



                    var lastData = 11;
                    var axisData;
//clearInterval(timeTicket);
                    timeTicket = (function (){
                        lastData += Math.random() * ((Math.round(Math.random() * 10) % 2) == 0 ? 1 : -1);
                        lastData = lastData.toFixed(1) - 0;
                        // axisData = (new Date()).toLocaleTimeString().replace(/^\D*/,'');

                        // 动态数据接口 addData
                        myChart.addData([
                            [
                                0,        // 系列索引
                                Math.round(Math.random() * 1000), // 新增数据
                                true,     // 新增数据是否从队列头部插入
                                false     // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                            ],
                            [
                                1,        // 系列索引
                                lastData, // 新增数据
                                false,    // 新增数据是否从队列头部插入
                                false,    // 是否增加队列长度，false则自定删除原有数据，队头插入删队尾，队尾插入删队头
                                axisData  // 坐标轴标签
                            ]
                        ]);
                    }, 2100);



                    // 为echarts对象加载数据
                    myChart.setOption(option);
                }
        );
    </script>
    <script>var timeTicket</script>
    <!--权威数据 end-->
@endsection